<!--
 * @FileDescription: 新增/修改 储罐弹窗
 * @Author: 祝小文
 * @Date: 2022-09-27 14:09
 -->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import _ from 'lodash'
import { Search } from '@element-plus/icons-vue'
import { emitter } from '@/composables'
import Title from '@/components/title/index.vue'
import DialogPopUp from '@/components/DialogPopUp/index.vue'
import cg_icon from '@/assets/image/mapIcon/cg-icon.png'
import { checkNumberTypeAndLength } from '@/utils/common'
import {
  queryCgxxInfo,
  queryCgxxInfoList,
  queryLastCgxxInfo,
  queryDcsSbInfo,
  insertOrUpdateCgxx,
} from '@/service/api'

const chemicalStore = useChemicalStore()
const tankFarm = chemicalStore.productionStorage.tankFarm

const props = defineProps({
  cjInfo: {
    type: Object,
    default: () => {
      return {}
    },
  }, //采集信息,
})

//字典
const sfBool: any = chemicalStore.commonDictionaries.sfBool
const ywBool: any = chemicalStore.commonDictionaries.ywBool
const syzt: any = chemicalStore.commonDictionaries.syzt
const cglx: any = tankFarm.dictionaries.cglx
const fplx: any = tankFarm.dictionaries.fplx
const pmcsqxh: any = tankFarm.dictionaries.pmcsqxh

//字段默认值
function fieldDefault() {
  if (props.cjInfo.lx === 'edit') {
    const selectField = ['syzt', 'cglx', 'fplx', 'pmcsqxh']
    for (const key in cgInfo.value) {
      if (selectField.includes(key) && cgInfo.value[key] === '0') {
        if (key === 'syzt') {
          cgInfo.value.syzt = syzt[0].zddm
        } else if (key === 'cglx') {
          cgInfo.value.cglx = cglx[0].zddm
        } else if (key === 'fplx') {
          cgInfo.value.fplx = fplx[0].zddm
        } else if (key === 'pmcsqxh') {
          cgInfo.value.pmcsqxh = pmcsqxh[0].zddm
        }
      }
    }
  } else {
    cgInfo.value.syzt = syzt[0].zddm
    cgInfo.value.cglx = cglx[0].zddm
    cgInfo.value.fplx = fplx[0].zddm
    cgInfo.value.pmcsqxh = pmcsqxh[0].zddm

    const sfBool: any = [
      'sfwbwc',
      'sfwblg',
      'sfszhjxt',
      'bjsfyb',
      'sfszbjxt',
      'bogsfjbzb',
      'sfszbogxt',
      'sfpzpmmhxt',
      'sfybgdpmxt',
    ]
    const ywBool: any = ['ywpmxt', 'ywplxt', 'ywdfxt', 'ywdcsxt', 'ywsisxt']
    for (const key in cgInfo.value) {
      if (sfBool.includes(key) || ywBool.includes(key)) {
        cgInfo.value[key] = '0'
      }
    }
  }
}

//获取企业id
const qyId = computed(() => {
  return chemicalStore.qyInfo.id
})

//储罐信息
const cgInfo: any = ref({
  cgmc: '',
  wh: '',
  syzt: '',
  cgcz: '',
  cglx: '',
  cgczhi: '',
  cgzj: '',
  cgg: '',
  wdlx: '',
  yllx: '',
  gzwdsx: '',
  gzylsx: '',
  bz: '',

  fplx: '',
  fpcz: '',

  sjwd: '',
  sjrj: '',
  sjyl: '',
  sjccnl: '',

  sfwbwc: '',
  sfwblg: '',
  ywbwc: '',
  ywpmxt: '',
  ywplxt: '',
  ywdfxt: '',
  ywdcsxt: '',
  ywsisxt: '',
  dcsid: '',
  ywsgzsxt: '',
  sfszhjxt: '',
  pmcsqxh: '',
  pmcsqszxs: '',
  sfszbjxt: '',
  bjsfyb: '',
  sfszbogxt: '',
  bogsfjbzb: '',
  sfyjjqdf: '',
  sfkyyckz: '',
  sfybgdpmxt: '',
  sfpzpmmhxt: '',
})
//必填字段
const requiredNameArr = [
  'cgmc',
  'wh',
  'syzt',
  'cgcz',
  'cglx',
  'cgcz',
  'cgzj',
  'cgg',
  'wdlx',
  'yllx',
  'gzwd',
  'gzyl',

  'fplx',
  'fpcz',

  'sjwd',
  'sjrj',
  'sjyl',
  'sjccn',

  'sfwbwc',
  'sfwblg',
  'ywbwc',
  'ywpmxt',
  'ywplxt',
  'ywdfxt',
  'ywdcsxt',
  'ywsisxt',
  'ywsgzsxt',
  'sfszhjxt',
  'pmcsqxh',
  'sfszbjxt',
  'bjsfyb',
  'sfyjjqdf',
  'sfkyyckz',
]

/** 渲染储罐列表 */
function loadStorageTankInfo(cjId: any, type: any) {
  queryCgxxInfo({ key: cjId }).then((res: any) => {
    console.log(1)
    delete res.id //过滤id
    delete res.cjsj //过滤创建时间
    delete res.gxsj //过滤更新时间

    const dcsid = cgInfo.value.dcsid

    cgInfo.value = res

    fieldDefault() //字段默认值

    //如果不是导入
    if (!type) {
      loadDcsList()

      let str: any = ''
      res.dcsBdInfoList &&
        res.dcsBdInfoList.forEach((item: any) => {
          str += item.equipNo + ', '
        })

      if (str) {
        cgInfo.value.dcsid = str.substring(0, str.length - 2)
      }
    } else {
      cgInfo.value.dcsid = dcsid
    }
  })
}

/** 数据导入功能 Start */
const cgSearchInput = ref('')
//导入上次数据事件
const importLastData = () => {
  queryLastCgxxInfo({ key: qyId.value }).then((res: any) => {
    delete res.id //过滤id
    delete res.cjsj //过滤创建时间
    delete res.gxsj //过滤更新时间

    const dcsid = cgInfo.value.dcsid

    if (res.cgmc) {
      cgInfo.value = res
      cgInfo.value.dcsid = dcsid
      ElMessage.success('导入数据成功')
    } else {
      ElMessage.warning('没有最新的储罐信息')
    }
  })
}

//导入按钮点击显示储罐列表事件
const cgListShow = ref(false)
const cgList = ref([])
const importDialogShow = () => {
  dcsListShow.value = false
  cgListShow.value = true
  queryCgxxInfoList({ qyid: qyId.value }).then((res: any) => {
    cgList.value = res
  })
}

//储罐列表搜索事件
const cgListSearchClick = _.debounce((val: any) => {
  queryCgxxInfoList({ qyid: qyId.value, cxmx: val }).then((res: any) => {
    cgList.value = res
  })
}, 300)

//储罐列表数据导入到表单事件
const exportClick = (cjId: any) => {
  loadStorageTankInfo(cjId, 'export')
  ElMessage.success('导入数据成功')
}

//储罐列表取消事件
const cgInfoCancelClick = () => {
  cgListShow.value = false
}
//储罐列表确认事件
const cgInfoSaveClick = () => {
  cgListShow.value = false
}
/** 数据导入功能 End */

/** DCS设备编码绑定功能 Start */
const dcsListShow = ref(false)
const dcsList = ref([])
const dcsSearchInput = ref('')
const dcsIdArr: any = ref([])
//加载dcs设备列表
const loadDcsList = () => {
  const params: any = { qyid: qyId.value }
  if (props.cjInfo.lx === 'edit') {
    params.cjid = props.cjInfo.cjId
  }
  dcsIdArr.value = []
  queryDcsSbInfo(params).then((res: any) => {
    res.forEach((item: any) => {
      if (item.sfbd) {
        item.sfyx = 1
        dcsIdArr.value.push(item)
      }
    })
    dcsList.value = res
  })
}

//dcs设备列表搜索功能(300毫秒防抖)
const dcsSearchInputClick = _.debounce((val: any) => {
  queryDcsSbInfo({ qyid: qyId.value, cjid: props.cjInfo.cjId, cxmx: val }).then((res: any) => {
    dcsList.value = res
  })
}, 300)

//dcs设备编码绑定点击事件
const dcsBindingClick = () => {
  cgListShow.value = false
  dcsListShow.value = true
}

//dcs绑定 / 解绑
const bindClick = (item: any) => {
  //绑定
  if (!item.sfbd) {
    let flag = false
    dcsIdArr.value.forEach((el: any) => {
      if (el.targetCode === item.targetCode) {
        flag = true
      }
    })

    if (cgInfo.value.dcsid) {
      cgInfo.value.dcsid += ', ' + item.equipNo
    } else {
      cgInfo.value.dcsid = ''
      cgInfo.value.dcsid += item.equipNo
    }

    if (!flag) {
      dcsIdArr.value.push(item)
    }

    item.sfbd = 1
    item.sfyx = 1
  }
  //解绑
  else if (item.sfbd) {
    cgInfo.value.dcsid = ''
    let str: any = ''
    dcsIdArr.value.forEach((el: any) => {
      if (el.targetCode === item.targetCode) {
        el.sfbd = 0
        el.sfyx = 0
      }

      if (el.sfbd === 1) {
        str += el.equipNo + ', '
      }
    })
    cgInfo.value.dcsid = str.substring(0, str.length - 2)
  }
}

//dcs 取消事件
const dcsCancelClick = () => {
  dcsListShow.value = false
}
//dcs 确认事件
const dcsSaveClick = () => {
  dcsListShow.value = false
}
/** DCS设备编码绑定功能 end */

/** 取消点击事件 */
const cancelClick = () => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  tankFarm.addStorageTankShow = false
}

/** 重置点击事件 */
const resetClick = () => {
  let dcsBdInfoList: any = []
  if (props.cjInfo.lx === 'edit') {
    dcsBdInfoList = [...cgInfo.value.dcsBdInfoList]
  }
  const dcsid = cgInfo.value.dcsid

  cgInfo.value = {
    cgmc: '',
    wh: '',
    syzt: '',
    cgcz: '',
    cglx: '',
    cgczhi: '',
    cgzj: '',
    cgg: '',
    wdlx: '',
    yllx: '',
    gzwdsx: '',
    gzylsx: '',
    bz: '',

    fplx: '',
    fpcz: '',

    sjwd: '',
    sjrj: '',
    sjyl: '',
    sjccnl: '',

    sfwbwc: '',
    sfwblg: '',
    ywbwc: '',
    ywpmxt: '',
    ywplxt: '',
    ywdfxt: '',
    ywdcsxt: '',
    ywsisxt: '',
    ywsgzsxt: '',
    sfszhjxt: '',
    pmcsqxh: '',
    pmcsqszxs: '',
    sfszbjxt: '',
    bjsfyb: '',
    sfszbogxt: '',
    bogsfjbzb: '',
    sfyjjqdf: '',
    sfkyyckz: '',
    sfybgdpmxt: '',
    sfpzpmmhxt: '',

    dcsBdInfoList: [],
  }

  //下拉框默认值
  cgInfo.value.syzt = syzt[0].zddm
  cgInfo.value.cglx = cglx[0].zddm
  cgInfo.value.fplx = fplx[0].zddm
  cgInfo.value.pmcsqxh = pmcsqxh[0].zddm

  const sfBool: any = [
    'sfwbwc',
    'sfwblg',
    'sfszhjxt',
    'bjsfyb',
    'sfszbjxt',
    'bogsfjbzb',
    'sfszbogxt',
    'sfpzpmmhxt',
    'sfybgdpmxt',
  ]
  const ywBool: any = ['ywpmxt', 'ywplxt', 'ywdfxt', 'ywdcsxt', 'ywsisxt']
  for (const key in cgInfo.value) {
    if (sfBool.includes(key) || ywBool.includes(key)) {
      cgInfo.value[key] = '0'
    }
  }

  if (props.cjInfo.lx === 'edit') {
    cgInfo.value.dcsBdInfoList = dcsBdInfoList
  }

  cgInfo.value.dcsid = dcsid
}

/** 保存点击事件 */
const saveClick = () => {
  /** 校验数据非空 Start */
  // let flag = false
  // for (const key in cgInfo.value) {
  //   if (requiredNameArr.includes(key) && !cgInfo.value[key]) {
  //     console.log(key, '字段未填写')
  //     flag = true
  //   }
  // }
  // if (flag) {
  //   return (chemicalStore.FormCheckConfirmShow = true)
  // }
  /** 校验数据非空 End */

  /** 校验数据类型和长度 Start */
  if (!checkNumberTypeAndLength(cgInfo.value.cgzj, '储罐直径', 6)) {
    return
  } else if (!checkNumberTypeAndLength(cgInfo.value.cgg, '储罐高(长)', 6)) {
    return
  } else if (!checkNumberTypeAndLength(cgInfo.value.gzwdsx, '工作温度上限', 6)) {
    return
  } else if (!checkNumberTypeAndLength(cgInfo.value.gzylsx, '工作压力上限', 6)) {
    return
  } else if (!checkNumberTypeAndLength(cgInfo.value.sjwd, '设计温度', 6)) {
    return
  } else if (!checkNumberTypeAndLength(cgInfo.value.sjyl, '设计压力', 6)) {
    return
  } else if (!checkNumberTypeAndLength(cgInfo.value.sjrj, '设计容积', 6)) {
    return
  } else if (!checkNumberTypeAndLength(cgInfo.value.sjccnl, '设计存储能力', 8)) {
    return
  }
  /** 校验数据类型和长度 End */

  /** DCS设备编码 Start */
  const dcsBdInfoList: any = []
  dcsIdArr.value.forEach((item: any) => {
    cgInfo.value.dcsBdInfoList.forEach((el: any) => {
      if (el.dcsid === item.targetCode) {
        dcsBdInfoList.push({
          id: el.id,
          cjid: el.cjid,
          dcsid: item.targetCode,
          sfyx: item.sfyx,
          qyid: qyId.value,
          equipType: item.equipType,
          unit: item.unit,
        })
      }
    })
    //新增的数据
    if (item.sfbd === 1 && !item.cjid) {
      dcsBdInfoList.push({
        dcsid: item.targetCode,
        sfyx: item.sfyx,
        qyid: qyId.value,
        equipType: item.equipType,
        unit: item.unit,
      })
    }
  })
  delete cgInfo.value.dcsid
  delete cgInfo.value.dcsBdInfoList
  /** DCS设备编码 End */

  tankFarm.addStorageTankShow = false

  const params: any = {
    ...cgInfo.value,
    qyid: qyId.value,
    dcsBdInfoList,
    gqid: props.cjInfo.fid,
    sfyx: 1,
  }

  //如果是修改需要传cjid
  if (props.cjInfo.lx === 'edit') {
    params.id = props.cjInfo.cjId
  }

  insertOrUpdateCgxx(params)
    .then((res: any) => {
      //添加
      if (props.cjInfo.lx === 'add') {
        ElMessage.success('新增储罐成功')
      }
      //修改
      else if (props.cjInfo.lx === 'edit') {
        ElMessage.success('修改储罐成功')
        //需要修改地图要素的标注名称
        //如果已经标注过，需要修改dom
        window.GOverlayArray.forEach((item: any) => {
          if (item.name === props.cjInfo.cjId) {
            const el = document.createElement('div')
            el.className = 'maplabelpopup-one'
            // 标牌禁止右击
            el.setAttribute('oncontextmenu', 'return false')
            const img = document.createElement('img')
            img.src = cg_icon
            const div = document.createElement('div')
            div.innerText = `${cgInfo.value.wh} ${cgInfo.value.cgmc}`
            el.appendChild(img)
            el.appendChild(div)

            item.overlay.updateDom(el)
          }
        })
      }
      //刷新数据
      emitter.emit('gq_refreshData')
    })
    .catch((err: any) => {
      if (props.cjInfo.lx === 'add') {
        ElMessage.error('新增储罐失败')
      } else if (props.cjInfo.lx === 'edit') {
        ElMessage.error('修改储罐失败')
      }
    })
}

/** 如果是修改，需要重新渲染数据 */
watch(
  () => props.cjInfo.cjId,
  (newValue, oldValue) => {
    if (props.cjInfo.lx === 'edit') {
      loadStorageTankInfo(props.cjInfo.cjId, null)
    } else {
      loadDcsList() //加载dcs列表
      resetClick() //重置表单
      fieldDefault() //字段默认值
    }
  },
  {
    immediate: true,
    deep: true,
  }
)
</script>

<template>
  <DialogPopUp
    title="储罐信息"
    @cancel-click="cancelClick"
    @reset-click="resetClick"
    @save-click="saveClick"
  >
    <!-- 单位基本信息 -->
    <div>
      <div class="card-item-title info">
        <Title title-info="基本信息" style="margin-bottom: 0; background-image: unset" />
        <div class="df_daoru_jc">
          <el-button @click="importLastData">导入上次</el-button>
          <el-button @click="importDialogShow">导入</el-button>
        </div>
      </div>
      <el-form :model="cgInfo" label-width="120px" class="demo-data">
        <div class="division">
          <div class="division-left"></div>
          <div class="division-text">储罐参数</div>
          <div class="division-right"></div>
        </div>
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="储罐名称">
              <el-input v-model.trim="cgInfo.cgmc" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="储罐位号">
              <el-input v-model.trim="cgInfo.wh" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="使用状态">
              <el-select v-model.trim="cgInfo.syzt" placeholder="请选择">
                <el-option
                  v-for="item in syzt"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存储介质">
              <el-input v-model.trim="cgInfo.cgcz" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="储罐类型">
              <el-select v-model.trim="cgInfo.cglx" placeholder="请选择">
                <el-option
                  v-for="item in cglx"
                  :key="item.value"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="储罐材质">
              <el-input v-model.trim="cgInfo.cgczhi" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="储罐直径">
              <el-input v-model.trim="cgInfo.cgzj">
                <template #suffix>
                  <i>m</i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="储罐高(长)">
              <el-input v-model.trim="cgInfo.cgg">
                <template #suffix>
                  <i>m</i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="温度类型">
              <el-select v-model.trim="cgInfo.wdlx" placeholder="请选择">
                <el-option
                  v-for="item in wdlx"
                  :key="item.value"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="压力类型">
              <el-select v-model.trim="cgInfo.yllx" placeholder="请选择">
                <el-option
                  v-for="item in yllx"
                  :key="item.value"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->

        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="工作温度上限">
              <el-input v-model.trim="cgInfo.gzwdsx">
                <template #suffix>
                  <i>℃</i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作压力上限">
              <el-input v-model.trim="cgInfo.gzylsx">
                <template #suffix>
                  <i>MPa</i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="bz">
              <el-input v-model.trim="cgInfo.bz" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <div class="division">
          <div class="division-left"></div>
          <div class="division-text">浮盘参数</div>
          <div class="division-right"></div>
        </div>

        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="浮盘类型">
              <el-select v-model.trim="cgInfo.fplx" placeholder="请选择">
                <el-option
                  v-for="item in fplx"
                  :key="item.value"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="浮盘材质">
              <el-select v-model.trim="cgInfo.fpcz" placeholder="请选择">
                <el-option
                  v-for="item in fpcz"
                  :key="item.value"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>

        <div class="division">
          <div class="division-left"></div>
          <div class="division-text">设计参数</div>
          <div class="division-right"></div>
        </div>
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="设计温度">
              <el-input v-model.trim="cgInfo.sjwd">
                <template #suffix>
                  <i>℃</i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设计容积">
              <el-input v-model.trim="cgInfo.sjrj">
                <template #suffix>
                  <i>m³</i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="设计压力">
              <el-input v-model.trim="cgInfo.sjyl">
                <template #suffix>
                  <i>MPa</i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设计存储能力">
              <el-input v-model.trim="cgInfo.sjccnl">
                <template #suffix>
                  <i>T</i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 设备设施 -->
    <div class="sbss-from">
      <Title title-info="设备设施" />
      <el-form label-width="140px">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="是否为保温罐">
              <el-select v-model.trim="cgInfo.sfwbwc" placeholder="请选择">
                <el-option
                  v-for="item in sfBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否为保冷罐">
              <el-select v-model.trim="cgInfo.sfwblg" placeholder="请选择">
                <el-option
                  v-for="item in sfBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <!-- <el-col :span="12">
            <el-form-item label="有无保温层">
              <el-select v-model.trim="cgInfo.ywbwc" placeholder="请选择">
                <el-option
                  v-for="item in ywBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="有无泡沫系统">
              <el-select v-model.trim="cgInfo.ywpmxt" placeholder="请选择">
                <el-option
                  v-for="item in ywBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有无喷淋系统">
              <el-select v-model.trim="cgInfo.ywplxt" placeholder="请选择">
                <el-option
                  v-for="item in ywBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="有无氮封系统">
              <el-select v-model.trim="cgInfo.ywdfxt" placeholder="请选择">
                <el-option
                  v-for="item in ywBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有无DCS系统">
              <el-select v-model.trim="cgInfo.ywdcsxt" placeholder="请选择">
                <el-option
                  v-for="item in ywBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="有无SIS系统">
              <el-select v-model.trim="cgInfo.ywsisxt" placeholder="请选择">
                <el-option
                  v-for="item in ywBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否设置火炬系统">
              <el-select v-model.trim="cgInfo.sfszhjxt" placeholder="请选择">
                <el-option
                  v-for="item in sfBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="DCS设备编码">
              <el-input v-model.trim="cgInfo.dcsid" class="dcs-sbbm" disabled>
                <template #suffix>
                  <span class="dcs-sbbm-btn" @click="dcsBindingClick">点击绑定</span>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <!-- <el-col :span="12">
            <el-form-item label="有无事故注水系统">
              <el-select v-model.trim="cgInfo.ywsgzsxt" placeholder="请选择">
                <el-option
                  v-for="item in ywBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->

          <el-col :span="12">
            <el-form-item label="泡沫产生器设置形式">
              <el-input v-model.trim="cgInfo.pmcsqszxs" style="width: 98%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="泡沫产生器型号">
              <el-select v-model.trim="cgInfo.pmcsqxh" placeholder="请选择">
                <el-option
                  v-for="item in pmcsqxh"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="冰机是否一用一备">
              <el-select v-model.trim="cgInfo.bjsfyb" placeholder="请选择">
                <el-option
                  v-for="item in sfBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否设置冰机系统">
              <el-select v-model.trim="cgInfo.sfszbjxt" placeholder="请选择">
                <el-option
                  v-for="item in sfBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="BOG系统是否具备一开一备">
              <el-select v-model.trim="cgInfo.bogsfjbzb" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in sfBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否设置BOG系统">
              <el-select v-model.trim="cgInfo.sfszbogxt" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in sfBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="是否设置高倍数泡沫灭火系统">
              <el-select v-model.trim="cgInfo.sfpzpmmhxt" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in sfBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否有半固定泡沫系统">
              <el-select v-model.trim="cgInfo.sfybgdpmxt" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in sfBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="罐底进出料管线是否设置紧急切断阀">
              <el-select v-model.trim="cgInfo.sfyjjqdf" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in sfBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="进出料截止阀是否可以远程控制">
              <el-select v-model.trim="cgInfo.sfkyyckz" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in sfBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
    </div>
  </DialogPopUp>

  <!-- 储罐列表 弹窗 -->
  <div v-if="cgListShow" class="cginfo-container">
    <p class="title">储罐列表</p>
    <div style="height: 100%; padding: 0 10px 17px">
      <el-input
        v-model.trim="cgSearchInput"
        placeholder="请输入位号或储罐名称查询"
        size="large"
        :suffix-icon="Search"
        class="card-search card-bck-color"
        @input="cgListSearchClick"
      />
      <div class="cginfo-main">
        <div v-for="(item, index) in cgList" :key="index">
          <div class="tankfarm-card-item">
            <span :title="item.wh">{{ item.wh }}</span>
            <span :title="item.cgmc">{{ item.cgmc }}</span>
            <i class="export-icon" @click="exportClick(item.id)"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="cginfo-bottom-btn">
      <el-button type="info" @click="cgInfoCancelClick">取&nbsp;&nbsp;消</el-button>
      <el-button type="info" style="background: #02979b" @click="cgInfoSaveClick"
        >确&nbsp;&nbsp;认</el-button
      >
    </div>
  </div>

  <!-- DCS设备列表 弹窗 -->
  <div v-if="dcsListShow" class="cginfo-container">
    <p class="title">DCS设备列表</p>
    <div style="height: 100%; padding: 0 0px 17px">
      <el-input
        v-model.trim="dcsSearchInput"
        placeholder="请输入名称或编号"
        size="large"
        :suffix-icon="Search"
        class="card-search card-bck-color"
        @input="dcsSearchInputClick"
      />
      <div class="cginfo-main">
        <div
          v-for="(item, index) in dcsList"
          :key="index"
          class="dcs-List"
          :class="{ 'active-dcs': item.sfbd === 1 }"
        >
          <div>
            <div style="display: flex; justify-content: space-between">
              <div style="color: red; font-weight: 700">{{ item.jc }}</div>

              <div>
                <span>{{ item.value ? item.value : '--' + ' ' }}</span>
                <span>{{ item.unit }}</span>
              </div>
            </div>

            <div class="dsc-message">
              <div>{{ item.equipNo }}</div>
              <div>{{ item.equipName }}</div>
            </div>
          </div>

          <div v-if="item.sfbd == '1'" class="bd-sign"></div>

          <div class="bd-group" @click="bindClick(item)">
            <div v-if="item.sfbd === 0" class="bd-img"></div>
            <div v-if="item.sfbd === 1" class="jb-img"></div>
            <div class="bd-title">{{ item.sfbd == 0 ? '绑定' : '解绑' }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="cginfo-bottom-btn">
      <el-button type="info" @click="dcsCancelClick">取&nbsp;&nbsp;消</el-button>
      <el-button type="info" style="background: #02979b" @click="dcsSaveClick"
        >确&nbsp;&nbsp;认</el-button
      >
    </div>
  </div>
</template>

<style lang="less" scoped>
.cginfo-container {
  position: absolute;
  top: 112px;
  left: calc(50% + 360px);
  width: 350px;
  height: calc(100% - 122px);
  padding: 5px 8px 7px 9px;
  border: 1px solid #0d609c;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.59) 100%, #00081d 0%);
  box-sizing: border-box;
  z-index: 10;

  .cginfo-main {
    height: calc(100% - 160px);
    overflow: auto;
  }
  /deep/.el-input__wrapper {
    background: rgba(1, 7, 17, 0.7);
  }

  /deep/.card-bck-color {
    font-size: 16px;
    color: #fff;
    background-color: rgba(1, 7, 17, 0.6);
  }
  /deep/.card-search {
    margin-bottom: 10px;
    border-radius: 8px;
    .el-input__suffix {
      font-size: 18px;
      cursor: pointer;
    }
  }

  .tankfarm-card-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
    line-height: 36px;
    margin-bottom: 12px;
    padding-left: 6px;
    padding-right: 14px;
    background: rgba(1, 7, 17, 0.7);
    border: 1px solid #6d6d6d;
    border-radius: 4px;
    span {
      color: #fff;
    }

    span:nth-child(2) {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 150px;
    }

    span:first-child {
      width: 80px;
      margin: 0 15px 0 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .export-icon {
      position: absolute;
      right: 20px;
      display: inline-block;
      width: 24px;
      height: 20px;
      background-image: url(@/assets/image/common/export-icon.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      cursor: pointer;
    }
  }

  .cginfo-bottom-btn {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button {
      width: 100px;
      height: 30px;
      font-size: 18px;
      background: #778082;
      border: 0;
      border-radius: 10px;
      cursor: pointer;
    }
    .el-button:last-child {
      margin-left: 70px;
    }
  }
  .title {
    height: 45px;
    line-height: 45px;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid #6d6d6d;
    margin-bottom: 10px;
  }
}

.df_daoru_jc {
  /deep/.el-button {
    color: #fff;
    background: #02979b;
    border: 0;
  }
}

//分割线
.division {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 10px 0 20px;
  color: #fff;
  .division-text {
    font-size: 16px;
    font-weight: 700;
    width: 150px;
    text-align: center;
  }
  .division-left,
  .division-right {
    height: 2px;
    background: #666666;
    flex: 1;
  }
}

.card-item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 10px;
}

.sbss-from {
  /deep/.el-form-item {
    margin-bottom: 30px;
  }
  .dcs-sbbm {
    /deep/.el-input__wrapper {
      padding: 0;
      box-shadow: unset;
    }
  }
  .dcs-sbbm-btn {
    width: 90px;
    height: 35px;
    background-color: rgb(2, 151, 155);
    border: 0;
    color: #fff;
    cursor: pointer;
  }
}

.active-dcs {
  border: 1px solid #00f6ff !important;
}

.dcs-List {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(1, 7, 17, 0.8);
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  padding: 2px 0 2px 14px;
  box-sizing: border-box;
  margin-bottom: 10px;
  .dsc-message {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bd-sign {
    width: 30px;
    height: 30px;
    margin-top: 8px;
    background: url('../../../../../assets/image/common/bdsign.png');
    background-repeat: no-repeat;
  }
  .bd-group {
    width: 40px;
    height: 80px;
    background: rgba(0, 246, 255, 0.4);
    border-radius: 0px 8px 8px 0px;
    margin-top: -2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    cursor: pointer;

    .bd-img {
      width: 24px;
      height: 24px;
      background: url('../../../../../assets/image/ProductionStorage/bd-icon.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .jb-img {
      width: 24px;
      height: 24px;
      background: url('../../../../../assets/image/ProductionStorage/jb-icon.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .bd-title {
    }
  }
}
</style>
